import {
  removeRights,
  setRights
} from '@/api/role'
import {
  rightsList
} from '@/api/rights'
export default {
  data() {
    return {
      // 角色列表
      roleList: this.$store.state.role.roleList,
      // 控制权限分配对话框的显示和隐藏
      setRightDialogVisible: false,
      // 权限树形数据
      rightsList: [],
      // 树形组件数据的配置项
      treeProps: {
        children: 'children',
        label: 'authName'
      },
      // 默认选中的节点id值数组
      defKeys: [],
      // 当前要分配权限的角色id
      roleId: ''
    }
  },
  // 侦听器侦听vuex数据的改变
  watch: {
    '$store.state': {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler() {
        // 重新获取最新的vuex数据
        this.roleList = this.$store.state.role.roleList
      }
    }
  },
  methods: {
    // 删除角色对应的权限
    async removeRightById(row, rightId) {
      const confirmResult = await this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 取消删除
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const {
        meta,
        data
      } = await removeRights(row.id, rightId)
      if (meta.status !== 200) {
        return this.$message.error('移除权限失败')
      }
      // 返回的数据刚好是删除成功后的权限数据，通过以下设置可以确保删除后不再折叠菜单而不是发起完整的网络请求
      row.children = data
      this.$message.success('移除权限成功')
    },
    // 显示编辑角色的对话框
    showEditDialog(id) {

    },
    // 删除角色
    removeRoleById(id) {

    },
    // 显示给角色分配权限的对话框
    async showSetRightDialog(row) {
      const {
        meta,
        data
      } = await rightsList('tree')
      if (meta.status !== 200) {
        return this.$message.error('获取数据失败')
      }
      // 赋值
      this.roleId = row.id
      // 获取权限列表树数据
      this.rightsList = data
      // 获取当前角色对应的三级权限的id,形成数组
      this.getLeafKeys(row, this.defKeys)
      // 打开对话框
      this.setRightDialogVisible = true
    },
    // 通过递归的形式获取角色下所有三级权限的id，并保存到defKeys数组中
    getLeafKeys(node, arr) {
      // 如果当前node不包括children属性，则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item => this.getLeafKeys(item, arr))
    },
    // 监听分配权限对话框的关闭事件
    setRightDialogClosed() {
      this.defKeys = []
    },
    // 完成权限的分配
    async allotRights() {
      // 获取选中节点和半选中的节点数组
      let rids = [
        ...this.$refs.treeRef.getHalfCheckedKeys(),
        ...this.$refs.treeRef.getCheckedKeys()
      ]
      rids = rids.join(',')
      const {
        meta
      } = await setRights(this.roleId, rids)
      if (meta.status !== 200) {
        this.$message.error('分配权限失败')
      }
      this.$message.success('分配权限成功')
      this.setRightDialogVisible = false
      // 重新更新vue的数据
      this.$store.dispatch('role/getRoleListSync')
    }
  }
}
